<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .empty {
            display: none;
        }
    </style>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        a {
            color: #666;
            text-decoration: none;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 0;
        }

        th input {
            vertical-align: middle;
        }

        body {
            color: #666;
            font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
        }

        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            display: inline-table;
        }

        *html .clearfix {
            height: 1%;
        }

        .clearfix {
            display: block;
        }

        *+html .clearfix {
            min-height: 1%;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .catbox {
            width: 940px;
            margin: 100px auto;
        }

        .catbox table {
            text-align: center;
            width: 100%;
        }

        .catbox table th,
        .catbox table td {
            border: 1px solid #aaa;
        }

        .catbox table th {
            background: #eee;
            border-top: 3px solid #ddd;
            height: 30px;
        }

        .catbox table td {
            padding: 10px;
            color: #444;
        }

        .catbox table tbody tr:hover {
            background: #eee;
        }

        .checkbox {
            width: 60px;
        }


        .goods {
            width: 100px;
        }

        .goods span {
            width: 180px;
            margin-top: 20px;
            text-align: left;
            float: left;
        }

        .price {
            width: 130px;
        }

        .count {
            width: 90px;
        }

        .count .add,
        .count input,
        .count .reduce {
            float: left;
            margin-right: -1px;
            position: relative;
            z-index: 0;
        }

        .count .add,
        .count .reduce {
            height: 23px;
            width: 17px;
            border: 1px solid #e5e5e5;
            background: #f0f0f0;
            text-align: center;
            line-height: 23px;
            color: #444;
        }

        .count .add:hover,
        .count .reduce:hover {
            color: #f50;
            z-index: 3;
            border-color: #f60;
            cursor: pointer;
        }

        .count input {
            width: 50px;
            height: 15px;
            line-height: 15px;
            border: 1px solid #aaa;
            color: #343434;
            text-align: center;
            padding: 4px 0;
            background-color: #fff;
            z-index: 2;
        }

        .subtotal {
            width: 150px;
            color: red;
            font-weight: bold;
        }

        .operation span:hover,
        a:hover {
            cursor: pointer;
            color: red;
            text-decoration: underline;
        }

        .foot {
            margin-top: 0px;
            color: #666;
            height: 48px;
            border: 1px solid #c8c8c8;
            border-top: 0;
            background-color: #eaeaea;
            background-image: linear-gradient(RGB(241, 241, 241), RGB(226, 226, 226));
            position: relative;
            z-index: 8;
        }

        .foot div,
        .foot a {
            line-height: 48px;
            height: 48px;
        }

        .foot .select-all {
            width: 80px;
            height: 48px;
            line-height: 48px;
            color: #666;
            text-align: center;
        }

        .foot .delete {
            padding-left: 10px;
        }

        .foot .closing {
            border-left: 1px solid #c8c8c8;
            width: 103px;
            text-align: center;
            color: #666;
            font-weight: bold;
            cursor: pointer;
            background-image: linear-gradient(RGB(241, 241, 241), RGB(226, 226, 226));
        }

        .foot .closing:hover {
            background-image: linear-gradient(RGB(226, 226, 226), RGB(241, 241, 241));
            color: #333;
        }

        .foot .total {
            margin: 0 20px;
            cursor: pointer;
        }

        .foot #priceTotal,
        .foot #selectedTotal {
            color: red;
            font-family: "Microsoft Yahei";
            font-weight: bold;
        }

        .foot .selected {
            cursor: pointer;
        }

        .foot .selected .arrow {
            position: relative;
            top: -3px;
            margin-left: 3px;
        }

        .foot .selected .down {
            position: relative;
            top: 3px;
            display: none;
        }

        .show .selected .down {
            display: inline;
        }

        .show .selected .up {
            display: none;
        }

        .foot .selected:hover .arrow {
            color: red;
        }

        .foot .selected-view {
            width: 938px;
            border: 1px solid #c8c8c8;
            position: absolute;
            height: auto;
            background: #ffffff;
            z-index: 9;
            bottom: 48px;
            left: -1px;
            display: none;
        }

        .show .selected-view {
            display: block;
        }

        .foot .selected-view div {
            height: auto;
        }

        .foot .selected-view .arrow {
            font-size: 16px;
            line-height: 100%;
            color: #c8c8c8;
            position: absolute;
            right: 330px;
            bottom: -9px;
        }

        .foot .selected-view .arrow span {
            color: #ffffff;
            position: absolute;
            left: 0px;
            bottom: 1px;
        }

        #selectedViewList {
            padding: 10px 20px 10px 20px;
        }

        #selectedViewList div {
            /* display: inline-block; */
            position: relative;
            width: 100px;
            height: 80px;
            border: 1px solid #ccc;
            margin: 10px;
            float: left;
        }

        #selectedViewList div img {
            width: 100px;
            height: 80px;
            margin-right: 10px;
            float: left;
        }

        #selectedViewList div span {
            display: none;
            color: #ffffff;
            font-size: 12px;
            position: absolute;
            top: 0px;
            right: 0px;
            width: 60px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            background: #000;
            cursor: pointer;
        }

        #selectedViewList div:hover span {
            display: block;
        }
    </style>
</head>
<body>
    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" class="checkAll" />全选
                    </th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td class="checkbox">
                        <input class="checkone" type="checkbox" />
                    </td>
                    <td class="goods">
                        <span>商品1</span>
                    </td>
                    <td class="price">5999.88</td>
                    <td>
                        <span>手表</span>
                    </td>
                    <td class="count">
                        <span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">5999.88</td>
                    <td class="operation">
                        <span class="delete">删除</span>
                    </td>
                </tr> -->
            </tbody>
        </table>
        <div class="foot" id="foot">
            <a id="deleteAll">删除</a>
            <div class="fr closing">结 算</div>
            <input type="hidden" id="priceAll" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="chooseAll">0</span>件</div>
        </div>
    </div>


    <h3 class="empty">购物车空空如也 , <a href="./04/list.html">立即逛逛</a> </h3>


    <script src="../js/tools.js"></script>
    <script>

        // 判断是否登录

        // 判断是否登录
        const user = localStorage.getItem('login_user');
        let oOnes ;

        if(user) {

            ajax({
                type : 'get' ,
                data : {
                    username : user
                } ,
                path : '../php/showCart.php' ,
                success : res => {
                    console.log(res);
                    // 新用户，购物车空空如也
                    const {status , msg , list} = res ;
                    if(status) {
                        let html = '' ;
                        list.forEach( v => {

                            const {
                                num ,
                                cart_id ,
                                goods_id ,
                                goods_price ,
                                goods_img,
                                goods_title
                            } = v ;

                            html += `
                                <tr data-id="${cart_id}">
                                    <td class="checkbox">
                                        <input class="checkone" type="checkbox"  />
                                    </td>
                                    <td class="goods">
                                        <span>${goods_title}</span>
                                    </td>
                                    <td class="price">${goods_price}</td>
                                    <td class="count">
                                        <span class="reduce">${num > 1 ? '-' : ''}</span>
                                        <input class="count-input" type="text" value="${num}" />
                                        <span class="add" onclick="add(this)">+</span>
                                    </td>
                                    <td class="subtotal">${num * goods_price}</td>
                                    <td class="operation">
                                        <span class="delete" onclick="del(${cart_id} , this)">删除</span>
                                    </td>
                                </tr>
                            `
                            const oTb = document.querySelector('tbody') ;
                            oTb.innerHTML = html ;


                            oOnes = document.querySelectorAll('.checkone') ;



                        })
                    } else {
                        document.querySelector('.empty').style.display = 'block';
                    }
                }
            })

        } else {
            location.href = './03login.html' ;
        }






        // 单独删除
        function del(id , that) {
            ajax({
                type : 'post' , 
                data : {
                    id  
                } ,
                path : '../php/cart_del.php' ,
                success : res => {
                    console.log(res);
                    const  {status , msg} = res ;
                    if(status) {
                        // 删除成功
                        that.parentNode.parentNode.remove() ;
                    } else {
                        alert(msg) ;
                    }
                }
            })
        }


        // 批量删除
        const oDelAll = document.querySelector('#deleteAll') ;
       
        oDelAll.onclick = function() {
            // 判断单选
            for(let i = 0 ; i < oOnes.length ; i++) {
                if(oOnes[i].checked) {
                    const id = oOnes[i].parentNode.parentNode.getAttribute('data-id');
                    // 删除成功
                    oOnes[i].parentNode.parentNode.remove() ;


                    // 判断是否全部删除了  oOnes.length  来判断


                    ajax({
                        type : 'post' , 
                        data : {
                            id
                        } ,
                        path : '../php/cart_del.php' ,
                        success : res => {
                            console.log(res);
                            const  {status , msg} = res ;
                            if(status) {
                               console.log('删除成功');
                                // DOM会有卡顿   先直接删除
                                //    oOnes[i].parentNode.parentNode.remove() ;
                            } else {
                                alert('服务器错误') ;
                            }
                        }
                    })
                }
            }
        }



        // 加减   直接使用   addTOCart.php
        //    加  num:1
        //    减  num:-1

        function add(that) {
            that.previousElementSibling.value++;
        }

    </script>
    
</body>
</html>